<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>抢票</title>

  <!-- 导航样式 -->
  <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <!-- 重置样式 -->
  <link rel="stylesheet/less" href="./css/reset.less">
  <!-- 公共样式 -->
  <link rel="stylesheet/less" href="./css/commet.less">

  <!-- 本页样式 -->
  <link rel="stylesheet/less" href="./css/mall.less">
</head>

<body>
  <div class="navbar navbar-default navbar-fixed-bottom">
    <!-- <a class="header_img" href="#"><img src="../image/avatar1.png" alt=""></a> -->
    <ul class="navbar-brand">
      <li class="dropdown">
        <div class="headers">
          <a href="index.html">
            <img src="./image/images/2_07.png" alt="">
            <div class="tite">
              <span>首页</span>
            </div>
          </a>
        </div>

        <div class="headers">
          <a href="mall.html">
            <img src="./image/images/3_14.png" alt="">
            <div class="tite">
              <span>抢票</span>
            </div>
          </a>
        </div>

        <div class="headers">
          <a href="order.html">
            <img src="./image/images/4_16.png" alt="">
            <div class="tite">
              <span>订单</span>
            </div>
          </a>
        </div>

        <div class="headers">
          <a href="Personal.html">
            <img src="./image/images/5_09.png" alt="">
            <div class="tite">
              <span>商城</span>
            </div>
          </a>
        </div>

        <div class="headers">
          <a href="tickets.html">
            <img src="./image/images/6_11.png" alt="">
            <div class="tite">
              <span>个人中心</span>
            </div>
          </a>
        </div>

      </li>
    </ul>

  </div>

  <!-- 上方条键值 -->
  <div class="header_nav">
    <div class="box">
      <div class="style2">
        <p>酒店降价</p>
      </div>
      <div class="style1">
        <p>抢火车票</p>
      </div>
      <div class="style3">
        <p>机票监控</p>
      </div>
    </div>
  </div>

  <div class="nave">
    <div>
      <div class="item">
        <div class="head">
          <p>广州-北京</p>
        </div>
        <div class="note">
          <p>06-25出发 Z101</p>
        </div>
        <div class="lest">
          <p>升级VIP抢票速度</p>
          <div class="nade">
            <p>立刻升级</p>
          </div>
        </div>

      </div>
      <div class="item">
        <div class="head">
          <p>广州-北京</p>
        </div>
        <div class="note">
          <p>06-25出发 Z101</p>
        </div>
        <div class="lest">
          <p>升级VIP抢票速度</p>
          <div class="nade">
            <p>立刻升级</p>
          </div>
        </div>

      </div>
      <div class="item">
        <div class="head">
          <p>广州-北京</p>
        </div>
        <div class="note">
          <p>06-25出发 Z101</p>
        </div>
        <div class="lest">
          <p>升级VIP抢票速度</p>
          <div class="nade">
            <p>立刻升级</p>
          </div>
        </div>

      </div>
    </div>
  </div>

</body>

</html>
<script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/less.min.js"></script>

<script>
  $(function () {
    $('style1').click(function () {
      $(this).css('background', '#fff');
      $(this).siblings('style1').css('background', '');
    });
  });
</script>